import React from 'react';
import { Form, Row, Col, Input, Cascader } from 'antd';
import { ASelect } from '@/components/SelfComp';
import { AppItem } from '@/types/app';
import { DataItem, FormProps } from '@/types/global';
import { CqBaseInfoFormValue } from '@/types/workbench';
import { formLayout, basicFormItemLayout, basicFormItemLangLayout, CascaderOption, generateCascaderOptions } from '@/utils/commons';

type CqBaseInfoFormProps<T> = FormProps<T> & {
  auditorData: DataItem[];
  systemData: DataItem[];
  clusterData: DataItem[];
  appList: AppItem[];
}
type CqBaseInfoFormPropsEx<T> = Omit<CqBaseInfoFormProps<T>, 'onSubmit'>;

const FormItem = Form.Item;

const CqBaseInfoForm: React.FC<CqBaseInfoFormPropsEx<CqBaseInfoFormValue>> = (props) => {
  // 表单对象
  const [form] = Form.useForm<CqBaseInfoFormValue>();
  const { colon, formData, auditorData } = props;
  // 8-8布局
  const formItemLayout = basicFormItemLayout;
  // 只有cqCode有值时，才会渲染form表单
  // 这里的写法cqCode &&
  // 8-16布局
  const formItemLangLayout = basicFormItemLangLayout;
  const { systemData, clusterData, appList } = props;
  const options: CascaderOption[] = generateCascaderOptions(appList, systemData, clusterData);
  const { cqCode, systemCode, clstCode, appCode } = formData;
  const system = [systemCode, clstCode, appCode];
  // console.log(formData);

  return (
    <React.Fragment>
      {cqCode &&
      <Form layout={formLayout} form={form}>
        <Row>
          <Col span={12}>
            <FormItem label="需求编号" name='cqCode' {...formItemLayout} colon={colon}
              initialValue={ formData.cqCode }
            >
              <Input disabled />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="需求名称" name='cqName' {...formItemLangLayout} colon={colon}
              initialValue={ formData.cqName }
            >
              <Input disabled />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="所属系统应用" name='system' {...formItemLangLayout} colon={colon}
              initialValue={ system }
            >
              <Cascader options={options} disabled />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="审核人(主开)" name='auditor' {...formItemLayout} colon={colon}
              initialValue={ formData.auditor }
            >
              <ASelect dataSource={auditorData} disabled />
            </FormItem>
          </Col>
        </Row>
      </Form>}
    </React.Fragment>
  );
}

export default CqBaseInfoForm;